<template>
  <div>
    <el-card style="margin: 20px">
      <el-row :gutter="20">
        <el-col :span="18">
          <el-input
            placeholder="根据用户名搜索"
            style="width: 200px; margin-right: 8px"
            v-model="searchInform"
          ></el-input>
          <el-button size="small" @click="emply">清空</el-button>
          <el-button type="primary" size="small" @click="handelSearch">搜索</el-button>
        </el-col>
        <el-col :span="6" style="text-align: right">
          <el-button
            type="success"
            size="small"
            icon="el-icon-edit"
            @click="handelAdd"
            >新增权限组</el-button
          >
        </el-col>
      </el-row>
      <el-alert
        title="共1条记录"
        type="info"
        show-icon
        style="margin-top: 20px"
      >
      </el-alert>
      <el-table
        ref="multipleTable"
        :data="list"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="200px"> </el-table-column>
        <el-table-column label="用户名" prop="title" align="center">
        </el-table-column>
        <el-table-column
          prop="create_date"
          label="日期"
          sortable
          align="center"
        >
        </el-table-column>
        <el-table-column label="操作" align="center" >
          <template #default="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              plain
              @click="handelEdit(scope.row)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              plain
              @click="del(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
     <el-pagination
        style="margin-top: 20px; text-align: right"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]"
        layout="prev, pager, next, sizes,jumper"
        :total="counts"
      >
      </el-pagination>
    </el-card>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="50%">
      <el-form ref="formRef" label-width="250px" :model="permissionsForm" :rules="rules" style="margin-right:200px">
        <el-form-item label="用户名" prop="title">
          <el-input v-model="permissionsForm.title"></el-input>
        </el-form-item>
        <el-form-item label="权限分配">
          <el-tree
            :data="data"
            show-checkbox
            default-expand-all
            node-key="id"
            :props="defaultProps"
            @check ="handeTree"
          >
          </el-tree>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
        style="display: block; text-align: right"
      >
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list, add, update, remove } from '@/api/base/permissions'
import { listTree } from '@/api/base/menus'
export default {
  data () {
    return {
      searchInform: '',
      params: {
        page: 1,
        pagesize: 0,
        keyword: ''
      },
      title: '',
      permissionsForm: {
        title: '',
        permissions: []
      },
      list: [],
      counts: null,
      pages: null,
      dialogVisible: false,
      rules: {
        title: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ]
      },
      data: [],
      defaultProps: {
        children: 'childs',
        label: 'title'
      }
    }
  },
  created () {
    this.getList()
    this.listTree()
  },
  methods: {
    handleSizeChange (val) {
      this.params.pagesize = val
      this.getList()
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      this.params.page = val
      this.getList()
      console.log(`当前页: ${val}`)
    },
    // 获取用户列表
    async getList () {
      const res = await list(this.params)
      console.log(res)
      this.list = res.data.list
      console.log(this.list)
      this.params.page = res.data.page
      this.params.pagesize = res.data.pagesize
      this.counts = res.data.counts
      this.pages = res.data.pages
    },
    // 点击添加
    async handelAdd () {
      this.title = '创建权限组'
      this.dialogVisible = true
    },
    // 树型
    async listTree () {
      const { data } = await listTree()
      console.log(data)
      const arr = JSON.parse(JSON.stringify(data).replace(/points/g, 'childs'))
      // 为其添加一个父节点
      const result = {
        id: 1,
        title: '系统菜单和页面权限点',
        childs: [...arr]
      }
      this.data.push(result)
    },
    // 点击选择树节点
    handeTree (node, value) {
      console.log(value)
      this.permissionsForm.permissions = value.checkedKeys
      console.log(this.permissionsForm.permissions)
    },
    // 编辑
    async handelEdit (val) {
      this.title = '编辑权限组'
      this.dialogVisible = true
      this.permissionsForm.id = val.id
      // this.permissionsForm.create_date = val.create_date
      this.permissionsForm.permissions = val.permissions
      this.permissionsForm.title = val.title
      console.log(this.permissionsForm)
    },
    // 点击确定
    async save () {
      if (this.title === '创建权限组') {
        await this.$refs.formRef.validate()
        this.dialogVisible = false
        const data = await add(this.permissionsForm)
        console.log(data)
        this.getList()
        this.permissionsForm = ''
      } else {
        await this.$refs.formRef.validate()
        this.dialogVisible = false
        if (this.permissionsForm.permissions) {
          const data = await update(this.permissionsForm)
          console.log(data)
          this.getList()
          this.permissionsForm = ''
        } else {
          this.$message.error('修改失败')
        }
      }
    },

    // 搜索
    async handelSearch () {
      const res = await list({ title: this.searchInform })
      console.log(res)
      this.list = res.data.list
    },
    // 删除
    async del (row) {
      await this.$confirm('此操作将永久删除用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      const res = await remove(row)
      console.log(res)
      this.$message({
        type: 'success',
        message: '成功删除用户!'
      })
      this.getList()
    },
    // 清空
    emply () {
      this.searchInform = ''
      this.getList()
    },
    // 选择
    toggleSelection (rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    }
  }
}
</script>

<style scoped lang="scss"></style>
